<template>
  <div class="orders-container">
    <el-card>
      <template #header>
        <h2>我的订单</h2>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="全部订单" name="all">
          <order-list :orders="orders" />
        </el-tab-pane>
        <el-tab-pane label="待付款" name="pending">
          <order-list :orders="pendingOrders" />
        </el-tab-pane>
        <el-tab-pane label="已付款" name="paid">
          <order-list :orders="paidOrders" />
        </el-tab-pane>
        <el-tab-pane label="已完成" name="completed">
          <order-list :orders="completedOrders" />
        </el-tab-pane>
        <el-tab-pane label="已取消" name="cancelled">
          <order-list :orders="cancelledOrders" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useOrderStore } from '../stores/order'
import OrderList from '../components/OrderList.vue'

const orderStore = useOrderStore()
const activeTab = ref('all')

const orders = computed(() => orderStore.orders)
const pendingOrders = computed(() => orderStore.orders.filter(order => order.status === 'pending'))
const paidOrders = computed(() => orderStore.orders.filter(order => order.status === 'paid'))
const completedOrders = computed(() => orderStore.orders.filter(order => order.status === 'completed'))
const cancelledOrders = computed(() => orderStore.orders.filter(order => order.status === 'cancelled'))

onMounted(async () => {
  await orderStore.fetchOrders()
})
</script>

<style scoped>
.orders-container {
  padding: 20px;
}
</style> 